import { defineComponent } from 'vue';
import { getNews } from "@/api/home"
import "./index.less"
import { Icon, Swipe, SwipeItem } from 'vant';
import { ElCarousel, ElCarouselItem } from 'element-plus';


export default defineComponent({
    name: 'News',
    setup() {
        const swipeRef = ref();
        const swipeAuto = ref(3000);
        const data = ref([]) as AnyObject;

        getNews().then(res => {
            data.value = res.data;
            console.log(res);

        })


        return () => (
            <ElCarousel
            height="50px"
            interval={6000}
                direction="vertical"
                autoplay={true}
            >
                {data.value?.map((_item: AnyObject) => <ElCarouselItem>
                    <a href={_item.url} class="news flex-between" target='_blank'>
                        <div class="flex-start"><div class="mark">新闻</div>
                            <div class="title">{_item.title}</div></div>
                        <div class="date">{_item.date}</div>
                    </a>
                </ElCarouselItem>)}

            </ElCarousel>

        );
    }
});
